<template>
<div class="form-box">
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="标题名称" prop="title">
    <el-input v-model="ruleForm.title"></el-input>
  </el-form-item>
  <el-form-item label="消息类型" prop="type">
    <el-select v-model="ruleForm.type" placeholder="请选择消息类型">
      <el-option label="文字消息" value="text"></el-option>
      <!-- <el-option label="图片消息" value="image"></el-option>
      <el-option label="图文消息" value="news"></el-option> -->
    </el-select>
  </el-form-item>
  <el-form-item label="关键字" prop="key">
    <el-input v-model="ruleForm.key"></el-input>
  </el-form-item>
  <el-form-item label="文字内容" :rules="[
          { required: this.ruleForm.type === 'text', message: '请填写文字内容', trigger: 'blur' },
          { max: 250, message: '长度最大为 250 个字符', trigger: 'blur' }
        ]">
    <el-input type="textarea" v-model="ruleForm.content"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
    <el-button @click="navTop">取消</el-button>
  </el-form-item>
</el-form>
</div>
</template>
<script>
import bus from '../../../bus.js';
export default {
  data () {
    return {
      ruleForm: {
        id: undefined,
        title: '',
        type: '',
        key: '',
        content: ''
      },
      fileList: [],
      rules: {
        title: [
          { required: true, message: '请输入关键字名称', trigger: 'blur' },
          { max: 20, message: '长度最大为 20 个字符', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择关键字类型', trigger: 'change' }
        ],
        key: [
          { required: true, message: '请填写关键字', trigger: 'blur' },
          { max: 20, message: '长度最大为 20 个字符', trigger: 'blur' }
        ]
      },
      upToken: undefined
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 如果是编辑
          if (this.$route.params.id) {
            APP.ajax('post@key/edit', this.ruleForm, res => {
              if (res.data.status === 200) {
                this.$message({
                  message: '添加成功!',
                  type: 'success'
                })
              }
            })
          } else {
            delete this.ruleForm.id
            APP.ajax('post@key/add', this.ruleForm, res => {
              if (res.data.status === 200) {
                this.$message({
                  message: '添加成功!',
                  type: 'success'
                })
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // handleRemove (file, fileList) {
    //   this.ruleForm.image_url = ''
    // },
    // handleSuccess (response, file, fileList) {
    //   let addr = 'img.lexikj.com/'
    //   this.ruleForm.image_url = addr + response.key
    // },
    // getToken () {
    //   APP.ajax('token', {}, res => {
    //     this.upToken = { token: res.data.data.token }
    //   })
    // },
    navTop() {
      bus.$emit('ViewShow', '取消')
    }
  },
  mounted () {
    if (this.$route.params.id) {
      APP.ajax('key/list/' + this.$route.params.id, {}, res => {
        this.ruleForm = res.data.data
        this.image_url = res.data.data.image_url
      })
    }
  }
}
</script>
<style scoped>
.form-box {
  width: 600px;
  margin-top: 20px;
}
.avatar {
  float: left;
  width: 100%;
  height: 100%;
}
</style>
